---
description: Learn how to use Prettier and other linters with GraphQL Code Generator to apply your custom code style and formatting rules.
---

import { Callout } from '@theguild/components'

# Prettier & Linters

The codegen supports lifecycle hooks, and you can use those for integration with Prettier or other linters, to apply your custom code style and formatting rules.

Before adding a hook, consider the alternative of having codegen ignored in your linting.
Codegen files should not be edited manually and formatting them slows down your codegen considerably.
Differences can be measured in several seconds for every run on big projects.

[You can read the complete documentation of lifecycle hooks here](/docs/config-reference/lifecycle-hooks)

## Prettier

<Callout type="warning">

**Using `--check` dry-run mode with prettyfied generated files**

Because the [`--check` dry-run mode](/docs/config-reference/codegen-config#dry-run-mode) is comparing local files with in-memory generated content, projects that runs Prettier on files generated with codegen will always end-up returning
all files as stale.

</Callout>

You can run it per each file:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['prettier --write'] }
  // ...
}
export default config
```

Or, for all files together:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['prettier --write'] }
  // ...
}
export default config
```

Consider this method if you're using `near-operation-file` preset as this has better performance when writing many files.

## TSLint

You can run it per each file:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['tslint --fix'] }
  // ...
}
export default config
```

Or, for all files together:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['tslint --fix'] }
  // ...
}
export default config
```

## ESLint

You can run it per each file:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterOneFileWrite: ['eslint --fix'] }
  // ...
}
export default config
```

Or, for all files together:

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  hooks: { afterAllFileWrite: ['eslint --fix'] }
  // ...
}
export default config
```
